<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌瑞家政</title>
    <link rel="stylesheet" href="../作业/common.css">
    <style>
        /* 让广告图片宽度撑满网页宽度 */
        .banner img {
            width: 100%;
        }
        .advantage{
            height: 350px;
            background-color: #ddd;
        }

        .advantage li {
            width: 272px;
            height: 350px;
            float: left;
            text-align: center;
            padding: 0 64px;
        }

        .advantage1 {
            background-color: #0091d4;
        }

        .advantage2{
            background-color: #38847e;
        }
        
        .advantage3{
            background-color: #a87d00;
        }

        .advantage li img {
            width: 110px;
            height: 110px;
            margin-top: 30px;
        }

        .service{
            height: 970px;
        }
        .title{
            width: 570px;
            text-align: center;
            margin: auto;
            border-bottom: 1px solid #000;
            padding-top: 350px;
            font-size: 15px;
        }

        .title p{
            width: 360px;
            margin: auto;
            border-bottom: 2px solid #37746d;
            padding-bottom: 30px;
            margin-top: 15px;
        }

        .service li{
            width: 380px;
            height: 240px;
            margin-right: 30px;
            margin-top: 30px;
            float: left;
            background-color: #bcbcbc;
            /* 水平居中 */
            text-align: center;
            /* 圆角 从左上顺时针到左下 */
            /* border-radius: 30px 30px 30px 30px; */
            border-radius: 30px;
        }
        /* 让图和浮动顶部的距离(上边距)为30像素 */
        .service li img{
            margin-top: 30px;
        }
        .service li p{
            /* 和图的间距10像素 */
            margin-top: 10px;
            /* 字体大小15像素 */
            font-size: 15px;
        }
        .service li:nth-child(3n){
            margin-right: 0px;
        }
        .information li{
            width: 350px;
            height: 540px;
            border: 1px solid #000;
            margin-top: 107px;
            padding: 13px;
            float: left;
        }
        .information li img {
            width: 100%;
            height: 237px;
        }
        .information li h3{
            margin-top: 34px;
            font:900 20px "微软雅黑";
        }
        .information li dl{
            margin-top: 28px;
        }
        .information li dd{
            background: url(../images/大于_03.jpg) no-repeat left center;
            padding-left: 30px;
            font: 400 13px "微软雅黑";
            margin-top: 14px;
        }
        .information li p{
            width: 90px;
            height: 32px;
            margin: auto;
            margin-top: 40px;
            border-radius: 99px;
            border: 2px solid blue;
            text-align: center;
            line-height: 32px;
            font-size: 13px;
            color: blue;
            font-weight: 900;
        }
        .c{
            width: 570px;
            text-align: center;
            margin: auto;
            border-bottom: 1px solid #000;
            margin-top: 350px;
            font-size: 15px;
        }
    </style>
</head>

<body>
    <!-- 顶部内容 -->
    <div class="head">
        <div class="w">
            <h1>
                <a herf="">
                    <img src="../images/2.jpg" alt="正在加载中">
                </a>
            </h1>
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">关于萌瑞</a>
                </li>
                <li>
                    <a href="">服务项目</a>
                </li>
                <li>
                    <a href="">客户案例</a>
                </li>
                <li>
                    <a href="">设备展示</a>
                </li>
                <li>
                    <a href="">活动资讯</a>
                </li>
                <li>
                    <a href="">联系我们</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- banner 横幅图片的广告模式 -->
    <div class="banner">
        <img src="../images/7.jpg" alt="正在加载中">
    </div>

    <!-- 优势 -->
    <div class="advantage">
        <div class="w">
            <ul>
                <li class="advantage1">
                    <a href="">
                        <img src="../images/4.jpg">
                        <h4>专业团队</h4>
                        <p>萌瑞家政团队现拥有保洁1000余人，日服务时长超9000小时。“用心服务好每一位客户”是团队的服务宗旨。</p>
                    </a>
                </li>
                <li class="advantage2">
                    <a href="">
                        <img src="../images/5.jpg">
                        <h4>安全可靠</h4>
                        <p>萌瑞家政对职员进行身份认证，确保信息真实，保障您的财产安全。家职员需经过培训，保证优质家政服务</p>
                    </a>
                </li>
                <li class="advantage3">
                    <a href="">
                        <img src="../images/6.jpg">
                        <h4>价格公正</h4>
                        <p>萌瑞员工行为规范明确，做到承诺兑现，服务可追溯。按标准收费，无任何隐性费用，所有费用协议均有体现。</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 服务 -->
    <div class="service">
        <div class="w">
            <div class="title">
                <h3>服务项目</h3>
                <p>我们不是无所不能，但我们一定竭尽所能</p>
            </div>
            <ul>
                <li class="service1">
                    <a href="">
                        <img src="../images/11.jpg" alt="">
                        <p>日常保洁</p>
                    </a>    
                </li>
                <li class="service2">
                    <a href="">
                        <img src="../images/12_03.jpg" alt="">
                        <p>开荒保洁</p>
                    </a>  
                 </li>
                 <li class="service3">
                    <a href="">
                        <img src="../images/13_03.jpg" alt="">
                        <p>大扫除</p>
                    </a>
                 </li>   
                 <li class="service4">
                    <a href="">
                        <img src="../images/14_03.jpg" alt="">
                        <p>家电清理</p>
                    </a>  
                 </li>
                 <li class="service5">
                    <a href="">
                        <img src="../images/11.jpg" alt="">
                        <p>日常保洁</p>
                    </a>   
                  </li>
                  <li class="service6">
                    <a href="">
                        <img src="../images/16_03.jpg" alt="">
                        <p>搬家</p>
                    </a>    
                  </li>
            </ul>
        </div>
    </div>
    <!-- 资讯 -->
    <div class="information">
        <div class="w">
            <div class="title">
                <h3>行业资讯</h3>
                <p>让你随时随地了解萌瑞家政</p>
            </div>
            <div>
                <ul>
                    <li>
                        <a href="">
                            <img src="../images/17_03.jpg" alt="">
                            <h3>企业动态</h3>
                            <dl>
                                <dd>瑞萌家政第五届合伙人培训会议圆满召开</dd>
                                <dd>第三届中国知名家庭服务企业改革创新</dd>
                                <dd>重要通知：节假日服务须知</dd>
                            </dl>
                            <p>查看更多</p>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="">
                            <img src="../images/17_03.jpg" alt="">
                            <h3>企业动态</h3>
                            <dl>
                                <dd>瑞萌家政第五届合伙人培训会议圆满召开</dd>
                                <dd>第三届中国知名家庭服务企业改革创新</dd>
                                <dd>重要通知：节假日服务须知</dd>
                            </dl>
                            <p>查看更多</p>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="">
                            <img src="../images/17_03.jpg" alt="">
                            <h3>企业动态</h3>
                            <dl>
                                <dd>瑞萌家政第五届合伙人培训会议圆满召开</dd>
                                <dd>第三届中国知名家庭服务企业改革创新</dd>
                                <dd>重要通知：节假日服务须知</dd>
                            </dl>
                            <p>查看更多</p>
                        </a>
                    </li>
                </ul>
            </div> 
        </div>
    </div>
    <div class="case">
        <div class="w">
            <div class="c">
                <h3>客户案例</h3>
                <p>凄凄切切群群群</p>
            </div>

        </div>
    </div>
</body>
</html>